<template>
  <div style="height:100%;width:100%">
    <baidu-map
      :style="{width:'100%',height:'76vh'}"
      ak="6trUTb7Z7zgL5PHvk3LIy5t639xXaovh"
      :zoom="16"
      :center="center"
      @mousemove="syncPolyline"
   
      @rightclick="newPolyline"
      :scroll-wheel-zoom="true"
    >
      <bm-control v-show="showcontrol">
        <button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</button>
      </bm-control>
      <template v-for="(item,index) in allxmlist">
        <template v-if="item.pointslist&&item.pointslist.length>0">
          <bm-marker
            v-for="(point,index1) in  item.pointslist"
            :position="point"
            :key="'points-'+index+'-'+index1"
            shape="BMAP_POINT_SHAPE_STAR"
            color="red"
            size="BMAP_POINT_SIZE_SMALL"
            @click.self="clickHandler($event,point)"
          ></bm-marker>
        </template>
        <template v-if="item.polylinelist&&item.polylinelist.length>0">
          <bm-polyline
            v-for="(polyline,index1) in  item.polylinelist"
            :points="polyline"
            :key="'polyline-'+index+'-'+index1"
            
            :stroke-opacity="0.8"
            :stroke-weight="2"
            :editing="false"
          ></bm-polyline>
        </template>
        <template v-if="item.polygonPathlist&&item.polygonPathlist.length>0">
          <bm-polygon
            v-for="(polygonPath,index1) in item.polygonPathlist"
            :key="'polygonPath-'+index+'-'+index1"
            :path="polygonPath"
            stroke-color="rgba(0,0,0,0)"
            fill-color="#6e87c9"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            :editing="false"
          />
        </template>
      </template>
      <bm-polyline :path="path" v-for="(path,index) of polyline.paths" :key="'pline-'+index"stroke-color="#d01010"></bm-polyline>
  <bm-polygon
            v-for="(polygonPath,index) in _ploygonlist"
            :key="'polygonPath-'+'-'+index"
            :path="polygonPath"
            stroke-color="rgba(0,0,0,0)"
            fill-color="#6e87c9"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            :editing="false"
          />
      <slot></slot>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    </baidu-map>
  </div>
</template>
<script>
const jsts = require("jsts/dist/jsts");
import Map from "ol/Map.js";
import View from "ol/View.js";
import GeoJSON from "ol/format/GeoJSON.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { fromLonLat } from "ol/proj.js";
import Feature from "ol/Feature";
import OSM from "ol/source/OSM.js";
import VectorSource from "ol/source/Vector.js";
import LinearRing from "ol/geom/LinearRing.js";
import {
  Point,
  LineString,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon
} from "ol/geom.js";
let parser = new jsts.io.OL3Parser();
parser.inject(
  Point,
  LineString,
  LinearRing,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon,
);
export default {
  data() {
    return {
      polyline: {
        editing: false,
        paths: []
      },
    };
  },
  computed:{
    _ploygonlist(){
      const _this = this;
      const list =[];
      this.polyline.paths.forEach(element => {
        list.push( _this.getbuffered(element.map(ele=>{
        return [ele.lng,ele.lat]
      })))
      });
      return list
    }
  },
  props: {
    allxmlist: {
      type: Array,
      default: () => new Array()
    },
    showcontrol: {
      type: Boolean,
      default: false
    },
    center: {
      type: Object,
      default: () => new Object({ lng: 112.473797, lat: 34.624502 })
    }
  },
  methods: {
        getbuffered(data){
      data = JSON.parse(JSON.stringify(data));
      if (data.length == 1) {
        data.push(data[0]);
      }
      let linestring = new LineString(data).transform("EPSG:4326", "EPSG:3857");
      let jstsGeom = parser.read(linestring);
      var format = new GeoJSON();
      // create a buffer of 40 meters around each line
      var buffered = jstsGeom.buffer(50);
      var geomtry = parser.write(buffered);
      let json = format.writeGeometry(
        geomtry.transform("EPSG:3857", "EPSG:4326")
      );
      return JSON.parse(json).coordinates[0].map(ele => {
        return {
          lng: ele[0],
          lat: ele[1]
        };
      });
        },
   clickHandler (e,point) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      !paths.length && paths.push([]);
            if(paths[paths.length - 1].length>0&&paths[paths.length - 1][0].jcxxid!==point.jcxxid){
              this.$message({
          message: '警告,这不是同一个项目的点',
          type: 'warning'
        });
        return false
      }
      paths[paths.length - 1].pop();
      paths[paths.length - 1].push(point);
      paths[paths.length - 1].push(e.point);
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat},${point.jcxxid}`);
    },
    toggle(name) {
      this[name].editing = !this[name].editing;
    },
    syncPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        return;
      }
      const path = paths[paths.length - 1];
      if (!path.length) {
        return;
      }
      if (path.length === 1) {
        path.push(e.point);
      }
      this.$set(path, path.length - 1, e.point);
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        paths.push([]);
      }
      const path = paths[paths.length - 1];
      path.pop();
      
      if (path.length) {
      this.$emit("drawend",path)
        paths.push([]);
      }
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      !paths.length && paths.push([]);
      paths[paths.length - 1].push(e.point);
    }
  }
};
</script>

